<template>
  <div class="repair-page">
    <div class="container">
      <h1>报修管理</h1>
      <el-table border :data="tableData" stripe style="width: 100%">
       
        <el-table-column prop="order_id" label="报修单号"   >
      
        </el-table-column>
        <el-table-column prop="user_id" label="用户ID" />
        <el-table-column prop="name" label="名字" />
        <el-table-column prop="house" label="地址" />
        <el-table-column prop="mobile" label="联系方式" />
        <el-table-column prop="fault_type_text" label="类型" />
        <el-table-column prop="visit_time" label="预期上门时间" />
        <el-table-column prop="status_text" label="状态" />
        <el-table-column prop="fault_desc" label="描述" />
        <el-table-column prop="file_list" label="故障图片">
          <template #default="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.file_url_list[0]"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="scope.row.file_url_list"
              show-progress
              preview-teleported
              :initial-index="4"
              fit="cover"
            />
          </template>
        </el-table-column>

        <el-table-column prop="worker_user_id" label="被分配职工id">
          <template #default="scope">
            <p>{{ scope.row.worker_user_id ? scope.row.worker_user_id : '待分配' }}</p>
          </template>
        </el-table-column>

        <el-table-column prop="create_time_text" label="发布时间" />

        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button
              v-if="scope.row.status === 0"
              type="primary"
              size="small"
              @click="handleAssignClick(scope.row._id)"
            >
              分配
            </el-button>
            <el-button type="danger" size="small" @click="handleDeleteClick(scope.row._id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 15, 20]"
        :size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />

      <el-dialog
        v-model="showDialog"
        title="分配订单"
        width="500"
      >
        <el-select
          v-model="selectWorkerId"
          placeholder="请选择要分配的工作人员"
          size="large"
          style="width: 400px; margin-bottom: 80px;"
        >
          <el-option
            v-for="item in workerList"
            :key="item.user_id"
            :label="item.name"
            :value="item.user_id"
          />
        </el-select>

        <template #footer>
          <div class="dialog-footer">
            <el-button @click="handleDialogCancel">取消</el-button>
            <el-button type="primary" @click="handleDialogConfirm">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";

const tableData = ref([]);
const totalNum = ref(0);
const currentPage = ref(1);
const pageSize = ref(5);
const showDialog = ref(false);
const workerList = ref([]);
const selectWorkerId = ref('');
const updateId = ref('');

const faultTypeMap = {
  0: "水电",
  1: "电器故障",
  2: "照明问题",
  3: "其它",
};

const statusMap = {
  0: "待维修",
  1: "待处理",
  2: "处理中",
  3: "已完成",
};

const getTableData = async () => {
  const params = {
    page: currentPage.value,
    size: pageSize.value,
  };

  const { data } = await axios.post("/get_service_order_list", params);

  if (typeof data === "object") {
    const { result, total } = data;

    tableData.value = result.map((item) => {
      const { fault_type, status, create_time, file_list } = item;
      return {
        ...item,
        fault_type_text: faultTypeMap[fault_type],
        status_text: statusMap[status],
        create_time_text: dayjs(create_time).format("YYYY-MM-DD HH:mm:ss"),
        file_url_list: file_list.map((item) => item.url),
      };
    });
    totalNum.value = total;
  } else {
    ElMessage.error("服务端异常");
  }

  console.log(data);
};

const getWorkerList = async () => {
  const params = {
    role: 1,
  };
  const { data } = await axios.post("/get_user_list", params);

  if (typeof data === "object") {
    workerList.value = data;
  } else {
    ElMessage.error("服务端异常");
  }
};

const handleSizeChange = (value) => {
  pageSize.value = value;

  getTableData();
};

const handleCurrentChange = (value) => {
  currentPage.value = value;

  getTableData();
};

const handleAssignClick = (_id) => {
  showDialog.value = true;
  updateId.value = _id;
}

const handleDialogCancel = () => {
  showDialog.value = false;
  updateId.value = '';
  selectWorkerId.value = '';
}

const handleDialogConfirm = async () => {
  if (!selectWorkerId.value) {
    ElMessage.error("请选择要分配的工作人员");
    return;
  }

  const params = {
    _id: updateId.value,
    worker_user_id: selectWorkerId.value
  };

  const { data } = await axios.post('/assign_service_order', params);

  if (data === 'success') {
    ElMessage.success('分配成功');
    handleDialogCancel();
    getTableData();
  } else {
    ElMessage.error('服务端异常');
  }

}


const handleDeleteClick = async (_id) => {
  if (!_id) {
    ElMessage.error("数据异常");
    return;
  }
  const params = {
    _id
  };

  const { data } = await axios.post('/delete_service_order', params);

  if (data === 'success') {
    ElMessage.success('删除成功');
    getTableData();
  } else {
    ElMessage.error('服务端异常');
  }
}

getTableData();
getWorkerList();
</script>

<style scoped>
.repair-page {
  width: 100%;
}

.container {
  width: 95%;
  margin: 0 auto;
  padding: 30px;
  border-radius: 20px;
  box-sizing: border-box;
  background-color: #fff;
  margin-top: 40px;
}

.el-table {
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>